<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 基本配置 -->
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <!-- 图标标题 -->
    <link rel="shortcut icon" th:href="@{/favicon.ico}" type="image/icon"/>
    <title>云曦·云中舍</title>

    <!-- css插件 -->
    <!-- layUI -->
    <link rel="stylesheet" th:href="@{/plugins/layui-v2.8.18/layui/css/layui.css}">
    <!-- sliderCaptcha -->
    <link rel="stylesheet" th:href="@{/plugins/SliderCaptcha-master/src/disk/slidercaptcha.min.css}">
    <!-- 自定义 -->
    <link rel="stylesheet" th:href="@{/assets/css/login/login.css}">

    <!-- font插件 -->
    <!-- font-awesome -->
    <link rel="stylesheet" th:href="@{/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css}">

    <!-- js插件 -->
    <!-- layUI -->
    <script th:src="@{/plugins/layui-v2.8.18/layui/layui.js}"></script>
    <!-- sliderCaptcha -->
    <script th:src="@{/plugins/SliderCaptcha-master/src/disk/longbow.slidercaptcha.min.js}"></script>

</head>

<body>
<div th:insert="load::loadcontent"></div>
<div class="container">
    <div class="form-warp">
        <form id="sign-in-form" class="layui-form">
            <h2 class="form-title">欢迎登录云中舍</h2>
            <div class="login-container">
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-cellphone"></i>
                        </div>
                        <input type="text"
                               name="phone"
                               value=""
                               lay-verify="reqPhone|phone"
                               placeholder="手机号"
                               lay-reqtext="请填写手机号"
                               autocomplete="off"
                               class="layui-input"
                               id="log-phone"
                        >
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-password"></i>
                        </div>
                        <input type="password"
                               name="password"
                               value=""
                               lay-verify="reqPass"
                               placeholder="密   码"
                               lay-reqtext="请填写密码"
                               autocomplete="off"
                               class="layui-input"
                               lay-affix="eye"
                               oncut="return false"
                               onpaste="return false"
                               oncopy="return false"
                               id="log-passwd"
                        >
                    </div>
                </div>
                <div class="layui-form-item">
                    <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
                    <a href="/forget" style="float: right; margin-top: 7px;">忘记密码？</a>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid"
                            lay-submit
                            lay-filter="login"
                    >
                        登&nbsp;&nbsp;&nbsp;录
                    </button>
                </div>

                <div class="maskLayer">
                    <div id="loginCaptcha"></div>
                </div>

            </div>
        </form>

        <form id="sign-up-form" class="layui-form">
            <h2 class="form-title">欢迎注册云中舍</h2>
            <div class="reg-container">
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text"
                               name="userName"
                               value=""
                               lay-verify="reqName"
                               placeholder="用户名"
                               autocomplete="off"
                               class="layui-input"
                               lay-affix="clear"
                        >
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-cellphone"></i>
                        </div>
                        <input type="text"
                               name="phone"
                               value=""
                               lay-verify="reqPhone|phone"
                               placeholder="手机号"
                               lay-reqtext="请填写手机号"
                               autocomplete="off"
                               class="layui-input"
                               id="reg-phone"
                        >
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-home" id="address"></i>
                    </div>
                    <label class="layui-form-label">家庭</label>
                    <div class="layui-input-group">
                        <input type="text"
                               name="estateName"
                               lay-verify="reqAdd"
                               placeholder="小区名"
                               class="layui-input"
                               id="estateName"
                        >
                        <div class="layui-input-suffix" style="width: 50px;">
                            小区
                        </div>
                        <input type="number"
                               pattern=^([1-9]|10)$
                               name="buildNum"
                               lay-verify="reqAdd"
                               placeholder="楼栋"
                               class="layui-input"
                               style="width: 70px;"
                               id="buildNum"
                        >
                        <div class="layui-input-suffix">
                            栋
                        </div>
                    </div>
                    <label class="layui-form-label" style="bottom: 14px;">住址</label>
                    <div class="layui-input-group" style="top: 5px;">
                        <input type="number"
                               pattern=^[1-5]$
                               name="unitNum"
                               lay-verify="reqAdd"
                               placeholder="单元"
                               class="layui-input"
                               id="unitNum"
                        >
                        <div class="layui-input-suffix" style="width: 50px;">
                            单元
                        </div>
                        <input type="number"
                               pattern=^([1-6][0][1-9]|[1-6][1][0])$
                               name="roomNum"
                               lay-verify="reqAdd"
                               placeholder="房间"
                               class="layui-input"
                               style="width: 70px;"
                               id="roomNum"
                        >
                        <div class="layui-input-suffix">
                            室
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-face-smile" id="sex"></i>
                    </div>
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                        <input type="radio"
                               lay-verify="reqSex"
                               name="sex"
                               value="0"
                               title="男"
                        >
                        <input type="radio"
                               lay-verify="reqSex"
                               name="sex"
                               value="1"
                               title="女"
                        >
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-group" id="role"></i>
                    </div>
                    <label class="layui-form-label">角色</label>
                    <div class="layui-input-block">
                        <input type="radio"
                               lay-verify="reqRole"
                               name="roleId"
                               value="2"
                               title="居民"
                        >
                        <input type="radio"
                               lay-verify="reqRole"
                               name="roleId"
                               value="3"
                               title="配送员"
                        >
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-password"></i>
                        </div>
                        <input type="password"
                               name="password"
                               value=""
                               lay-verify="reqPass|passwd"
                               placeholder="密码"
                               autocomplete="off"
                               class="layui-input"
                               id="reg-password"
                               lay-affix="eye"
                               oncut="return false"
                               onpaste="return false"
                               oncopy="return false"
                        >
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-password"></i>
                        </div>
                        <input type="password"
                               name="confirmPassword"
                               value=""
                               lay-verify="reqPass|confirmPassword|passwd"
                               placeholder="确认密码"
                               autocomplete="off"
                               class="layui-input"
                               lay-affix="eye"
                               oncut="return false"
                               onpaste="return false"
                               oncopy="return false"
                        >
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid"
                            lay-submit
                            lay-filter="register"
                    >
                        注&nbsp;&nbsp;&nbsp;册
                    </button>
                </div>

                <div class="maskLayer">
                    <div id="regCaptcha"></div>
                </div>

            </div>
        </form>
    </div>
    <div class="desc-warp">
        <div class="desc-warp-item sign-up-desc">
            <div class="content">
                <button id="sign-up-btn">注册</button>
            </div>
            <img th:src="@{/assets/imgs/login/postman.png}"
                 alt=""
                 style="width: 80%;position:relative;top: 100px"
            >
            <img th:src="@{/assets/imgs/login/cloud2.png}"
                 alt=""
                 style="width: 60%;position:relative;bottom: 75vh;right: 35vh"
            >
        </div>
        <div class="desc-warp-item sign-in-desc">
            <div class="content">
                <button id="sign-in-btn">登录</button>
            </div>
            <img th:src="@{/assets/imgs/login/house.png}"
                 alt=""
                 style="position:relative;top: 100px"
            >
            <img th:src="@{/assets/imgs/login/cloud1.png}"
                 alt=""
                 style="width: 60%;position:relative;bottom: 75vh;left: 15vh"
            >
        </div>
    </div>
</div>

<style>
    .login-container {
        width: 320px;
        margin: 21px auto 0;
    }

    .login-other .layui-icon {
        position: relative;
        display: inline-block;
        margin: 0 2px;
        top: 2px;
        font-size: 26px;
    }

    .reg-container {
        width: 320px;
        margin: 21px auto 0;
    }

    .reg-other .layui-icon {
        position: relative;
        display: inline-block;
        margin: 0 2px;
        top: 2px;
        font-size: 26px;
    }

    .layui-btn {
        border-radius: 15px;
        font-weight: bold;
        font-size: medium;
        background-image: linear-gradient(to right, #6bc0d1, #66bdd8, #66b9de, #6bb5e3, #74b0e6, #71b5ec, #6dbaf2, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
    }

    #sex, #role {
        top: 10px;
    }

    .maskLayer {
        width: 90%;
        height: 100%;
        background-color: rgba(0, 0, 0, .5);
        position: fixed;
        top: 0;
        left: 40px;
        z-index: 99;
        display: none;
    }

    #loginCaptcha, #regCaptcha {
        display: none;
        top: 155px;
    }

    #address {
        top: 10px;
    }

</style>

<!-- js插件 -->
<!-- 自定义 -->
<script th:src="@{/js/login/index.js}"></script>
<script>
    layui.use(function () {

        /**
         * TODO data 数据定义层
         */
        const $ = layui.$
        const form = layui.form
        const layer = layui.layer

        let passwordPatton = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/

        /**
         * TODO verify 自定义验证规则
         */
        form.verify({
            /* 登录 */
            reqPhone: function (value) {
                if (!value) {
                    return "手机号必须要填哦"
                }
            },
            reqPass: function (value) {
                if (!value) {
                    return "密码必须要填哦"
                }
            },

            /* 注册 */
            reqName: function (value) {
                if (!value) {
                    return "用户名必须要填哦"
                }
            },
            reqAdd: function (value) {
                if (!value) {
                    return "家庭住址信息不完整"
                }
            },
            reqSex: function () {
                if (!$('input:radio[name="sex"]:checked').val()) {
                    return "性别必须要填哦"
                }
            },
            reqRole: function () {
                if (!$('input:radio[name="roleId"]:checked').val()) {
                    return "角色必须要填哦"
                }
            },
            // 两次输入密码验证
            confirmPassword: function (value) {
                const passwordValue = $('#reg-password').val()
                if (value !== passwordValue) {
                    return '两次密码输入不一致'
                }
            },
            // 密码格式校验
            passwd: function (value) {
                if (value) {
                    if (!passwdLengthVerify(value, 8, 16)) {
                        return "密码长度必须在8-16位之间哦"
                    }
                    if (!passwdPattonVerify(value, passwordPatton)) {
                        return "密码只能且必须包含字母和数字哦"
                    }
                }
            },
        })

        /**
         * TODO method 自定义方法
         */
        // 密码校验
        function passwdPattonVerify(value, pat) {
            return pat.test(value);
        }

        //信息长度检查
        function passwdLengthVerify(value, min, max) {
            return value.length >= min && value.length <= max;
        }

        //登录弹窗开启事件
        function loginPopup() {
            $(".maskLayer,#loginCaptcha").show()
            $("body").css("overflow", "hidden")
        }

        //登录弹窗关闭事件
        function loginPopDown() {
            $(".maskLayer,#loginCaptcha").hide()
            $("#loginCaptcha").load(location.href + " #loginCaptcha>*", "");
            $("body").css("overflow", " ")
        }

        //注册弹窗开启事件
        function regPopup() {
            $(".maskLayer,#regCaptcha").show()
            $("body").css("overflow", "hidden")
        }

        //注册弹窗关闭事件
        function regPopDown() {
            $(".maskLayer,#regCaptcha").hide()
            $("#regCaptcha").load(location.href + " #regCaptcha>*", "");
            $("body").css("overflow", " ")
        }

        /**
         * TODO submit 提交方法
         */
        // 登录表单提交
        form.on('submit(login)', function (data) {
            // 获取表单字段值
            const field = data.field
            // 弹出滑块验证码
            loginPopup()
            // 验证码配置
            sliderCaptcha({
                id: 'loginCaptcha',
                repeatIcon: 'fa fa-redo',
                localImages: function () {
                    return '../static/plugins/SliderCaptcha-master/src/images' + Math.round(Math.random() * 4) + '.jpg';
                },
                setSrc: function () {
                    return null;
                },
                onSuccess: function () {
                    // ajax传值操作
                    $.ajax({
                        type: 'post',
                        url: '/doLogin',
                        data: field,
                        success: function (Msg) {
                            if (Msg.code === 200) {
                                setTimeout(() => {
                                    loginPopDown()
                                    window.location.href = "/index"
                                }, 500)
                            } else {
                                setTimeout(() => {
                                    loginPopDown()
                                    layer.msg(Msg.msg)
                                    //清空手机号和密码值
                                    $("#log-phone").val("")
                                    $("#log-passwd").val("")
                                }, 500)
                            }
                        }
                    })
                    return false
                },
                remoteUrl: "/captcha",
                verify: function (datas, url) {
                    let ret = false;
                    $.ajax({
                        url: url,
                        data: JSON.stringify(datas),
                        async: false,
                        cache: false,
                        type: 'POST',
                        contentType: 'application/json',
                        success: function (result) {
                            ret = result;
                        }
                    })
                    return ret;
                }
            })
            return false;
        })

        // 注册表单提交
        form.on('submit(register)', function (data) {
            // 获取表单字段值
            const field = data.field
            // 弹出滑块验证码
            regPopup()
            // 验证码配置
            sliderCaptcha({
                id: 'regCaptcha',
                repeatIcon: 'fa fa-redo',
                localImages: function () {
                    return '../static/plugins/SliderCaptcha-master/src/images' + Math.round(Math.random() * 4) + '.jpg';
                },
                setSrc: function () {
                    return null;
                },
                onSuccess: function () {
                    // ajax传值操作
                    $.ajax({
                        type: 'post',
                        url: '/register',
                        data: field,
                        success: function (Msg) {
                            if (Msg.code !== 200) {
                                setTimeout(() => {
                                    regPopDown()
                                    layer.msg(Msg.msg)
                                    if(Msg.msg === "该地址不存在,请确认后重新填写") {
                                        //清空家庭住址信息
                                        $("#estateName").val("")
                                        $("#buildNum").val("")
                                        $("#unitNum").val("")
                                        $("#roomNum").val("")
                                    } else if(Msg.msg === "该手机号已经注册过了,请直接登录吧" || Msg.msg === "该用户名已经注册过了,请直接登录吧") {
                                        setTimeout(() => {
                                            window.location.href = "/logout";
                                        }, 2000)
                                    }
                                }, 500)
                            } else {
                                regPopDown()
                                layer.msg("恭喜，注册成功啦")
                                setTimeout(() => {
                                    window.location.href = "/logout";
                                }, 3000)
                            }
                        }
                    })
                    return false
                },
                remoteUrl: "/captcha",
                verify: function (datas, url) {
                    let ret = false;
                    $.ajax({
                        url: url,
                        data: JSON.stringify(datas),
                        async: false,
                        cache: false,
                        type: 'POST',
                        contentType: 'application/json',
                        success: function (result) {
                            ret = result;
                        }
                    })
                    return ret;
                }
            })

            return false;
        })

    })
</script>
</body>
</html>
